<template>
  <section class="xmv-abouts xmv-wrap">
    <p>
      1、基于vue2，可复用UI组件<br/>
      2、基于BEM命名，css可复用组件
    </p>
    <h4>css组件结构</h4>
<div class="demo-markup-source u-letter-box--small">
<pre class="c-pre">
<code class="c-code c-code--multiline html hljs xml">
|- src/  --------------------- 项目源代码
    |- styles |- import-components-badges
              |- import-components-bubbles
              |- import-components-buttons
              |- import-components-inputs
              |- import-objects-grid
              |- import-lib-normalize
              |- ...
</code>
</pre>
</div>
    <h4>js组件结构</h4>
<div class="demo-markup-source u-letter-box--small">
<pre class="c-pre">
<code class="c-code c-code--multiline html hljs xml">
|- packages/  --------------------- 项目源代码
    |- header
    |- popup
    |- picker
    |- datetime-picker
    |- message-box
    |- actionSheet
    |- toast
    |- upload
    |- keyboard
</code>
</pre>
</div>
  </section>
</template>
<style lang="less" scoped>
p {
  text-align: left;
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
</style>

